<template>
  <el-empty
    v-if="list.length === 0"
    image="http://wx4.sinaimg.cn/mw690/6a04b428gy1fyr5kuqgzkg208c08c4pg.gif"
    image-size="500"
    description="没有找到匹配的管理员"
  ></el-empty>
  <!-- 主体 -->
  <main v-if="list.length !== 0">
    <!-- <el-empty>
      <el-button type="primary">Button</el-button>
    </el-empty> -->
    <el-row v-if="list.length !== 0">
      <!-- md="{span:6,offset:6}"
          xs="{span:12,offset:12}" -->
      <el-col v-for="(item, index) in renderList" :key="item">
        <div class="grid-content">
          <div class="emit">
            <img src="../../../../assets/imgs/admin/圆角矩形4.png" alt="" />
            <div class="operate">
              <div class="click">
                <p class="name">{{ item.name }}</p>
                <button class="ellipsis" @click="show(item, index)">...</button>
                <!-- 修改框 -->
                <div class="active" v-if="item.value">
                  <!-- v-show="active" -->
                  <p @click="getId(item)">修改</p>
                  <!-- 弹出遮罩层和添加框 -->
                  <el-dialog v-model="dialogFormVisible" title="修改管理员信息">
                    <el-form :model="form">
                      <el-form-item label="姓名" :label-width="formLabelWidth">
                        <el-input
                          v-model="form.name"
                          autocomplete="off"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="性别" :label-width="formLabelWidth">
                        <div>
                          <el-radio v-model="form.sex" label="1" size="small"
                            >男</el-radio
                          >
                          <el-radio v-model="form.sex" label="2" size="small"
                            >女</el-radio
                          >
                        </div>
                      </el-form-item>
                      <el-form-item label="电话" :label-width="formLabelWidth">
                        <el-input
                          v-model="form.tel"
                          autocomplete="off"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="邮箱" :label-width="formLabelWidth">
                        <el-input
                          v-model="form.email"
                          autocomplete="off"
                        ></el-input>
                      </el-form-item>
                      <el-form-item
                        label="添加日期"
                        :label-width="formLabelWidth"
                      >
                        <div class="block">
                          <el-date-picker
                            v-model="form.date"
                            type="date"
                            placeholder="请选择一个日期"
                          >
                          </el-date-picker>
                        </div>
                        <!-- <el-input v-model="form.date" autocomplete="off"></el-input> -->
                      </el-form-item>
                    </el-form>
                    <template #footer>
                      <span class="dialog-footer">
                        <el-button @click="dialogFormVisible = false"
                          >取消</el-button
                        >
                        <el-button type="primary" @click="change(item)"
                          >确认</el-button
                        >
                      </span>
                    </template>
                  </el-dialog>
                  <div class="middle"></div>
                  <p @click="open(item.id)">删除</p>
                </div>
              </div>
              <span icon></span>
              <p class="id">我的身份</p>
            </div>
          </div>
          <div class="line"></div>
          <div class="admin-msg">
            <p>
              <span>电话</span><span>{{ item.tel }}</span>
            </p>
            <p>
              <span>电子邮件</span><span>{{ item.email }}</span>
            </p>
            <p>
              <span>添加日期</span><span>{{ item.date }}</span>
            </p>
          </div>
        </div>
      </el-col>
    </el-row>
  </main>
  <!-- 底部 -->
  <footer>
    <div class="message">
      <button>&lt;</button>
      <span class="msg1">显示1-8条</span>
      <span class="msg2">共{{ list.length }}条</span>
    </div>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="list.length"
      :page-size="size.count"
      @current-change="jump"
    >
    </el-pagination>
  </footer>
</template>

<script>
import { ElMessageBox, ElMessage } from "element-plus";
import { computed, onMounted, ref, reactive } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    const store = useStore();
    const size = ref({ count: 8, page: 1 });

    // 全部数据
    const list = computed(() => {
      return store.state.admin.adminList;
    });
    // 渲染的数据
    const renderList = computed(() => {
      return list.value.slice(8 * (size.value.page - 1), 8 * size.value.page);
    });
    //修改管理员相关数据
    let dialogFormVisible = ref(false);
    const formLabelWidth = "140px";
    const form = reactive({
      name: "",
      sex: "",
      tel: "",
      email: "",
      date: "",
    });

    // 点击显示操作信息
    const show = (val, index) => {
      renderList.value[index].value = !val.value;
    };
    // 分页组件左右键自带切换页码的功能，所以不用再另外自定义切换下一页上一页。
    //点击>下一页，实现页码+1
    // const add = () => {
    //   size.value.page;
    // };
    // 点击<上一页，实现页码-1
    // const minus = () => {
    //   size.value.page;
    // };
    // 点击页码，实现跳转至相对页面
    const jump = (e) => {
      size.value.page = e;
    };
    // 点击修改，获取当前操作管理员id 给表单默认赋值
    const getId = (i) => {
      dialogFormVisible.value = true;
      console.log(i.sex);
      form.name = i.name;
      form.sex = i.sex.toString();
      form.tel = i.tel;
      form.email = i.email;
      form.date = i.date;
    };
    // 修改管理员信息方法
    const change = (i) => {
      dialogFormVisible.value = false;
      const changeList = ref({});
      changeList.value.id = i.id;
      changeList.value.name = form.name;
      changeList.value.sex = +form.sex;
      changeList.value.tel = form.tel;
      changeList.value.email = form.email;
      changeList.value.date =
        form.date || form.date.toLocaleDateString().split("/").join("-");
      changeList.value.value = 0;
      console.log(changeList.value);
      // console.log({ id: i.id, ...changeList });
      store.dispatch("changeDataAsync", changeList.value);
      return form;
    };

    // 删除管理员信息
    const open = (magId) => {
      ElMessageBox.confirm("你确定要删除这条管理员信息吗？", "⚠️注意", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          ElMessage({
            type: "success",
            message: "Delete completed",
          });
          store.dispatch("delDataAsync", { id: magId });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "Delete canceled",
          });
        });
    };
    onMounted(() => {
      store.dispatch("getDataAsync");
      //   const input = document.querySelector("input").value;
      //   console.log(input);
    });

    return {
      show,
      list,
      size,
      renderList,
      jump,
      open,
      change,
      dialogFormVisible,
      formLabelWidth,
      form,
      getId,
    };
  },
};
</script>

<style lang="less" scoped>
// 内容
main {
  overflow: auto;
  width: 100%;
  height: calc(100% - 161px - 20px + 7px);
  // display: flex;
  // flex-wrap: wrap;
  .el-row {
    width: 100%;
    margin-bottom: 31px;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
  .el-row:last-child {
    margin-bottom: 0;
  }
  .el-col:last-child {
    margin-right: 0;
  }
  .el-col {
    // height: 350px;
    width: 410px;
    border-radius: 4px;
    // align-self: start;
    // margin-right: 42px;
    // flex-shrink: 1;
    // flex: 1;
    // flex-grow: 1;
    flex-basis: auto;
    margin-bottom: 31px;
    box-shadow: 0 0 10px #131313;
  }
  .grid-content {
    border-radius: 4px;
    padding: 30px 30px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    height: 350px;
    .emit {
      display: flex;
      width: 100%;
      height: 114px;
      img {
        width: 114px;
        height: 114px;
      }
      .operate {
        flex: 1;
        margin-left: 20px;
        .click {
          display: flex;
          position: relative;
          justify-content: space-between;
          width: 100%;
          .name {
            width: 120px;
            // height: 85px;
            font-size: 20px;
            margin-top: 10px;
            margin-bottom: 30px;
          }
          .ellipsis {
            font-size: 30px;
            color: #6b947f;
            line-height: 0;
            border: none;
            background-color: #fff;
            align-self: start;
          }
          .active {
            width: 40px;
            height: 40px;
            background-color: red;
            position: absolute;
            padding: 0 5px;
            top: 20px;
            right: -10px;
            background-color: #d9e2c8;
            .middle {
              width: 100%;
              height: 1px;
              background-color: #6b947f;
            }
            p {
              text-align: center;
              line-height: 20px;
              cursor: pointer;
            }
            p:hover {
              color: #6b947f;
            }
          }
        }
        .id {
          width: 81px;
          height: 29px;
          background-color: #d9e2c8;
          font-size: 14px;
          line-height: 29px;
          text-align: center;
        }
      }
    }
    .line {
      width: 100%;
      height: 2px;
      background-color: #6b947f;
      margin-top: 30px;
      margin-bottom: 30px;
    }
    .admin-msg {
      flex: 1;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      width: 100%;
      p {
        display: flex;
        width: 100%;
        justify-content: space-between;
        font-size: 20px;
        color: #3a3a3a;
      }
    }
  }
}
main::-webkit-scrollbar {
  width: 0 !important;
}
// 底部
footer {
  height: 36px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 38px;
  // padding-bottom: 45px;
  //   margin-bottom: 20px;
  align-items: center;
  .message {
    display: flex;
    button {
      width: 29px;
      height: 29px;
      margin-right: 18px;
      color: #ffa44c;
      font-size: 24px;
    }
    .msg2 {
      margin-left: 20px;
    }
    .msg1,
    .msg2 {
      height: 29px;
      line-height: 29px;
      font-size: 18px;
      color: #333;
    }
  }
}
/deep/.el-empty {
  height: 800px;
  .el-empty__description {
    p {
      font-size: 50px !important;
      color: red;
    }
  }
}
// 修改管理员数据弹出框
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
